<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <style>
        li{
            margin-left: 10px;
        }
    </style>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>

    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
</head>
<body>

    <div id="app">
        <h3 align="center">蜗牛shop</h3>
        <br>
        <div style="margin-left: 900px">
            搜索：<input type="text" name="findname" v-model="findname" @change="findByName">
            <a class="btn btn-primary btn-sm" @click="findByName">确认</a>
            <a class="btn btn-primary btn-sm" @click="findAll">返回</a>
        </div>
        <form>
            type_code: <input type="text" name="type_code" v-model="saveForm.type_code"> <br>
            type_name: <input type="text" name="type_name" v-model="saveForm.type_name"> <br>
            <button type="button" @click="add">添加</button>
        </form>
        <div id="updateT" style="display: none">
            <input type="hidden" v-model="updateForm.type_id">
            type_code: <input type="text" name="type_code" v-model="updateForm.type_code"> <br>
            type_name: <input type="text" name="type_name" v-model="updateForm.type_name"> <br>
            <button type="button" @click="update">修改</button>
        </div>
        <br>
        <table width="800" align="center">
            <tr>
                <td>type_id</td>
                <td>type_code</td>
                <td>type_name</td>
                <td>操作</td>
            </tr>
            <tr v-for="t in list">
                <td>{{t.type_id}}</td>
                <td>{{t.type_code}}</td>
                <td>{{t.type_name}}</td>
                <td>
                    <a @click="del(t.type_id)">删除</a>
                    |
                    <a @click="updateT(t)">修改</a>
                </td>
            </tr>
        </table>
        <div class="container" style="width:40%;">
            <div class="row" >
                <div  style="align: center;">
                    <ul class="pagination pagination-sm" >
                        <li><a class="btn btn-default btn-sm" @click="headAndend(1)">首页</a></li>
                        <li><a class="btn btn-default btn-sm" @click="changePage(-1)">上一页</a></li>
                        <li class="disabled"><a class="btn btn-default btn-sm">当前第{{page}}页</a></li>
                        <li><a class="btn btn-default btn-sm">每页
                            <select v-model="size" @change="findAll">
                                <option value="5">5</option>
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="50">50</option>
                            </select>
                            条数据</a></li>
                        <li><a class="btn btn-default btn-sm">共{{pageCount}}页</a></li>
                        <li><a class="btn btn-default btn-sm" @click="changePage(+1)">下一页</a></li>
                        <li><a class="btn btn-default btn-sm" @click="headAndend(0)">尾页</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        axios.default.baseURL= "http://localhost:8080/";

        axios.interceptors.request.use(function(config){
            config.headers.contentType = "application/json";
            return config;
        })

        let vue = new Vue({
            el: "#app",
            data: {
                list: [],
                size: '5',
                page: '1',
                pageCount: "",
                findname: "",
                saveForm: {
                    type_code: "",
                    type_name: "",

                },
                w: null,
                updateForm: {
                    type_id: "",
                    type_code: "",
                    type_name: "",
                },
            },
            methods:{
                findAll(){
                    let self = this;
                    axios.get("type/" + this.page + "/" + this.size).then(function(response){
                        let pageData = response.data.data;
                        self.list = pageData.data;
                        self.pageCount = pageData.pageCount;
                    });
                },
                changePage(page){
                    let newPage = +this.page + +page;
                    if(newPage == 0){
                        this.findAll();
                        return;
                    };
                    if(newPage > this.pageCount){
                        this.findAll();
                        return;
                    }
                    this.page = newPage;
                    this.findAll();
                },
                headAndend(page){
                    this.page = this.pageCount;
                    if(page == 1){
                        this.page = page;
                    }
                    this.findAll();
                },
                findByName(){
                    if(this.findname == ''){
                        this.findAll();
                        return;
                    }
                    let self = this;
                    axios.get("type/" + this.findname).then(function(response){
                        self.list = response.data.data;
                    });
                },
                add() {
                    let self = this;
                    // 只要指定了Content-Type: application/json，那么axios就会把参数格式化为json字符串
                    console.log(this.saveForm);
                    axios.post("type", this.saveForm).then(function(response) {
                        self.findAll();
                        self.type_code = self.type_name ="";
                    });
                },
                del(type_id) {
                    let self = this;
                    axios.delete("type/" + type_id).then(function (response) {
                        self.findAll();
                    });
                },
                updateT(t) {
                    this.updateForm.type_id = t.type_id;
                    this.updateForm.type_code = t.type_code;
                    this.updateForm.type_name = t.type_name;
                    this.w = layer.open({
                        title:"修改用户",
                        type:1,
                        content: $("#updateT")
                    });
                },
                update() {
                    let self = this;
                    axios.put("type", this.updateForm).then(function(response) {
                        self.findAll();
                        layer.close(self.w);
                    });
                }
            },
            created(){
                this.findAll();
            }

        })
    </script>
</body>
</html>